<template>


  <van-card
      v-for="user in userList"
      :desc="`${user.gender===0?'女':'男'}`"
      :title="user.username"
      :thumb="user.avatarUrl"
  >
    <template #tags>
      <van-tag v-for="tag in user.tags" style="margin-right: 5px" plain type="danger">{{ tag }}</van-tag>
    </template>
    <template #footer>
      <van-button size="mini">联系我</van-button>
    </template>
  </van-card>

  <van-empty v-if="flag" description="搜索结果为空"/>


</template>


<script setup>
import {ref} from "vue";
import {useRoute} from "vue-router";
import {getUserByTagList} from "../apis/userApi.js";
import {onMounted} from "vue";
import {User} from "../pojo/User.js";
import {showToast} from "vant";

const route = useRoute()
const {tags} = route.query
console.log(tags)
const flag = ref(false)

let userList = ref([])

onMounted(async () => {
  const resp = await getUserByTagList(tags)


  console.log(resp.data.data)

  if (resp.data.data.length === 0) {
    flag.value = true

  } else {
    userList.value =
        resp.data.data.map(
            user => {
              const newUser = new User()
              newUser.id = user.id
              newUser.username = user.username
              newUser.userAccount = user.userAccount
              newUser.avatarUrl = user.avatarUrl
              newUser.gender = user.gender
              newUser.phone = user.phone
              newUser.email = user.email
              newUser.userStatus = user.userStatus
              newUser.tags = JSON.parse(user.tags)    //字符串转换成数组
              newUser.isDelete = user.isDelete
              newUser.role = user.role
              newUser.userStatus = user.userStatus
              return newUser;
            }
        )
  }


})

</script>

<style scoped>

</style>